<template>
  <view class="secondhand-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <view class="location-info">
          <text class="iconfont-v2 icon-dingwei location-icon"></text>
          <text class="location-text">广西民族大学</text>
        </view>
        <!-- <view class="header-actions">
          <view class="action-btn">
            <text class="iconfont-v2 icon-gengduo"></text>
            <text class="separator">|</text>
            <text class="iconfont-v2 icon-dagou"></text>
          </view>
        </view> -->
      </view>
      
      <!-- 搜索栏 -->
      <view class="search-section">
        <view class="search-bar-container">
          <text class="iconfont-v2 icon-sousuo search-icon"></text>
          <input 
            class="search-input" 
            placeholder="您想要搜索点什么" 
            v-model="searchKeyword" 
            @confirm="handleSearch" 
          />
          <button class="search-btn" @click="handleSearch">
            <text>搜索</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 分类图标 -->
    <view class="category-nav">
      <view class="category-item" v-for="(category, index) in categories" :key="index" @click="goCategory(category)">
        <view class="category-icon" :style="{ backgroundColor: category.color }">
          <text class="iconfont-v2" :class="category.icon"></text>
        </view>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>

    <!-- 特价专区 -->
    <view class="special-offer-section">
      <view class="section-header">
        <view class="section-title">
          <view class="title-bar"></view>
          <text>特价专区</text>
        </view>
      </view>
      
      <view class="offer-products">
        <view class="product-item" v-for="product in offerProducts" :key="product.id" @click="goProductDetail(product)">
          <view class="product-image">
            <image :src="product.image" :alt="product.name" />
            <view class="want-count">{{ product.wantCount }}人想要</view>
          </view>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <view class="product-price">
              <text class="current-price">¥{{ product.currentPrice }}</text>
              <text class="original-price">¥{{ product.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          v-for="(tab, index) in filterTabs" 
          :key="index"
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          <text>{{ tab }}</text>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="products-section">
      <view class="products-grid">
        <view 
          class="product-card" 
          v-for="product in productList" 
          :key="product.id"
          @click="goProductDetail(product)"
        >
          <view class="product-image">
            <image :src="product.image" :alt="product.name" />
            <view class="product-tag" v-if="product.tag">{{ product.tag }}</view>
          </view>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-location">{{ product.location }}</text>
            <view class="product-price">
              <text class="current-price">¥{{ product.currentPrice }}</text>
              <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
            </view>
            <view class="product-stats">
              <text class="want-count">{{ product.wantCount }}人想要</text>
              <text class="time">{{ product.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      currentTab: 0,
      
      // 分类数据
      categories: [
        { name: "手机", icon: "icon-dianhua", color: "#ffc107" },
        { name: "附近闲置", icon: "icon-dingwei", color: "#FF6B35" },
        { name: "同校闲置", icon: "icon-bofang", color: "#ED6567" },
        { name: "回收", icon: "icon-shanchu", color: "#50C878" },
        { name: "电器", icon: "icon-gouwuche", color: "#20B2AA" }
      ],
      
      // 特价专区产品
      offerProducts: [
        {
          id: 1,
          name: "闲置高级花花本",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          wantCount: 500,
          currentPrice: 89,
          originalPrice: 120
        },
        {
          id: 2,
          name: "闲置高级花花本",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          wantCount: 500,
          currentPrice: 89,
          originalPrice: 120
        },
        {
          id: 3,
          name: "闲置高级花花本",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          wantCount: 500,
          currentPrice: 89,
          originalPrice: 120
        }
      ],
      
      // 过滤标签
      filterTabs: [
        "综合排序",
        "距离最近",
        "价格最低",
        "最新发布"
      ],
      
      // 商品列表
      productList: [
        {
          id: 1,
          name: "闲置高级花花本",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          location: "广西民族大学",
          currentPrice: 89,
          originalPrice: 120,
          wantCount: 500,
          time: "2小时前",
          tag: "特价"
        },
        {
          id: 2,
          name: "二手iPhone 12",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          location: "广西民族大学",
          currentPrice: 2800,
          originalPrice: 3200,
          wantCount: 128,
          time: "3小时前",
          tag: "热门"
        },
        {
          id: 3,
          name: "闲置笔记本电脑",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          location: "广西民族大学",
          currentPrice: 1200,
          wantCount: 89,
          time: "5小时前"
        },
        {
          id: 4,
          name: "二手电动车",
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          location: "广西民族大学",
          currentPrice: 800,
          originalPrice: 1200,
          wantCount: 256,
          time: "1天前",
          tag: "急售"
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        console.log("搜索商品:", this.searchKeyword);
        uni.showToast({
          title: `搜索: ${this.searchKeyword}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: "请输入搜索关键字",
          icon: 'none'
        });
      }
    },
    goCategory(category) {
      console.log("选择分类:", category.name);
      uni.showToast({
        title: `选择分类: ${category.name}`,
        icon: 'none'
      });
    },
    switchTab(index) {
      this.currentTab = index;
      console.log("切换标签:", this.filterTabs[index]);
    },
    goProductDetail(product) {
      console.log("查看商品详情:", product);
      uni.navigateTo({
        url: `/pages/fast/product-detail?id=${product.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.secondhand-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header-nav {
  background: #ED6567;
  padding: 20rpx 40rpx 30rpx;
  color: white;

  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .location-info {
      display: flex;
      align-items: center;
      gap: 12rpx;

      .location-icon {
        font-size: 28rpx;
      }

      .location-text {
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .header-actions {
      .action-btn {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .iconfont-v2 {
          font-size: 32rpx;
        }

        .separator {
          font-size: 24rpx;
          opacity: 0.6;
        }
      }
    }
  }

  .search-section {
    .search-bar-container {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 50rpx;
      padding: 20rpx 30rpx;
      gap: 20rpx;

      .search-icon {
        font-size: 32rpx;
        color: #999;
      }

      .search-input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 28rpx;
        color: #333;

        &::placeholder {
          color: #999;
        }
      }

      .search-btn {
        background: #ED6567;
        color: white;
        border: none;
        border-radius: 40rpx;
        padding: 16rpx 32rpx;
        font-size: 28rpx;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: #d55a54;
        }

        text {
          color: white;
        }
      }
    }
  }
}

.category-nav {
  background: white;
  padding: 40rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
    }

    .category-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16rpx;

      .iconfont-v2 {
        font-size: 40rpx;
        color: white;
      }
    }

    .category-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.special-offer-section {
  background: white;
  margin: 0 20rpx 20rpx;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .section-header {
    margin-bottom: 30rpx;

    .section-title {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .title-bar {
        width: 8rpx;
        height: 32rpx;
        background: #ED6567;
        border-radius: 4rpx;
      }

      text {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }
  }

  .offer-products {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;

    .product-item {
      flex-shrink: 0;
      width: 240rpx;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
      }

      .product-image {
        position: relative;
        width: 240rpx;
        height: 160rpx;
        border-radius: 16rpx;
        overflow: hidden;
        margin-bottom: 16rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .want-count {
          position: absolute;
          bottom: 8rpx;
          right: 8rpx;
          background: rgba(0, 0, 0, 0.6);
          color: white;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
        }
      }

      .product-info {
        .product-name {
          font-size: 26rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
          line-height: 1.3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .product-price {
          display: flex;
          align-items: center;
          gap: 12rpx;

          .current-price {
            font-size: 28rpx;
            font-weight: 600;
            color: #ED6567;
          }

          .original-price {
            font-size: 22rpx;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}

.filter-section {
  background: white;
  padding: 20rpx 40rpx;
  margin-bottom: 20rpx;

  .filter-tabs {
    display: flex;
    gap: 20rpx;
    flex-wrap: nowrap;
    overflow-x: auto;

    .filter-tab {
      padding: 16rpx 32rpx;
      background: #f8f9fa;
      border-radius: 40rpx;
      font-size: 26rpx;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2rpx solid transparent;
      text-wrap: nowrap;

      &.active {
        background: #ED6567;
        color: white;
        border-color: #ED6567;
      }

      &:hover:not(.active) {
        border-color: #ED6567;
        color: #ED6567;
      }
    }
  }
}

.products-section {
  padding: 0 20rpx;

  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .product-card {
      background: white;
      border-radius: 24rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
      }

      .product-image {
        position: relative;
        width: 100%;
        height: 200rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .product-tag {
          position: absolute;
          top: 12rpx;
          left: 12rpx;
          background: #ED6567;
          color: white;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
          font-weight: 500;
        }
      }

      .product-info {
        padding: 24rpx;

        .product-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
          line-height: 1.3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .product-location {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 12rpx;
          display: block;
        }

        .product-price {
          display: flex;
          align-items: center;
          gap: 12rpx;
          margin-bottom: 12rpx;

          .current-price {
            font-size: 28rpx;
            font-weight: 600;
            color: #ED6567;
          }

          .original-price {
            font-size: 22rpx;
            color: #999;
            text-decoration: line-through;
          }
        }

        .product-stats {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .want-count {
            font-size: 22rpx;
            color: #666;
          }

          .time {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style>